// 企业列表新增组件
<template>
  <div>
    <el-dialog v-model="addDia" title="知识库创建" width="600" :before-close="addClose" append-to-body @open="dialogOpen">
      <el-form ref="formRef" label-position="top" label-width="auto" :model="formLabelAlign" style="max-width: 600px"
        :rules="rules">
        <el-form-item label="知识库名称" prop="realName">
          <el-input v-model="formLabelAlign.realName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="知识分类" prop="classify">
          <el-select v-model="formLabelAlign.classify" placeholder="请选择知识分类" style="width: 240px">
            <el-option v-for="item in wiki_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="remarks">
          <el-input type="textarea" v-model="formLabelAlign.remarks" placeholder="请输入简介" />
        </el-form-item>
        <el-form-item label="封面" prop="remarks">
          <!-- <div class="cover_box">
            <div class="cover_img">
              <img :src="selectImg.url" alt="" />
              <div class="cover_img_text">
                <p>{{ formLabelAlign.realName }}</p>
                <span>{{ formLabelAlign.remarks }}</span>
              </div>
            </div>
            <div class="cover_list">
              <div class="cover_list_item">
                <p>封面列表</p>
                <div class="cover_list_img">
                  <img :src="item.url" alt="" @click="selectImg = item" v-for="item in imgList" :key="item.name"
                    :class="item.url === selectImg.url ? 'active' : ''" />
                </div>
              </div>
            </div>
          </div> -->
          <CoverList ref="coverListRef" v-model:realNameVal="formLabelAlign.realName" v-model:remarksVal="formLabelAlign.remarks" v-model:imageUrlVal="formLabelAlign.imageUrl" ></CoverList>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div style="text-align: left;">
            <el-checkbox @change="onIsAilLibrary" v-model="formLabelAlign.isKnowledge" label="是否为AI文档知识库"
              size="large" />
          </div>
          <div>
            <el-button @click="addClose"> 取消 </el-button>
            <el-button type="primary" @click="handleClose"> 创建 </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import CoverList from '../cover-list.vue';

// 接口
import { apiEnterpriseKnowledgeAdd, apiKnowledgeConfigConfigKey } from '@/api/enterpriseDoc/enterpriseListApi';
import { ref, reactive, toRefs, defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
const formRef = ref(null);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['onRefresh']); //参数为数组
const props = defineProps({
  isAddPower: {
    default: false
  }
});

const { wiki_type } = toRefs<any>(proxy?.useDict('wiki_type'));
import cover1 from '../../../../../assets/images/enterprise/cover1.png';
import cover2 from '../../../../../assets/images/enterprise/cover2.png';
import cover3 from '../../../../../assets/images/enterprise/cover3.png';
import cover4 from '../../../../../assets/images/enterprise/cover4.png';
import cover5 from '../../../../../assets/images/enterprise/cover5.png';
import cover6 from '../../../../../assets/images/enterprise/cover6.png';
import cover7 from '../../../../../assets/images/enterprise/cover7.png';
import cover8 from '../../../../../assets/images/enterprise/cover8.png';
import cover9 from '../../../../../assets/images/enterprise/cover9.png';
import cover10 from '../../../../../assets/images/enterprise/cover10.png';
import cover11 from '../../../../../assets/images/enterprise/cover11.png';
import cover12 from '../../../../../assets/images/enterprise/cover12.png';
const imgList: any = ref([
  { name: 'cover1.png', url: cover1 },
  { name: 'cover2.png', url: cover2 },
  { name: 'cover3.png', url: cover3 },
  { name: 'cover4.png', url: cover4 },
  { name: 'cover5.png', url: cover5 },
  { name: 'cover6.png', url: cover6 },
  { name: 'cover7.png', url: cover7 },
  { name: 'cover8.png', url: cover8 },
  { name: 'cover9.png', url: cover9 },
  { name: 'cover10.png', url: cover10 },
  { name: 'cover11.png', url: cover11 },
  { name: 'cover12.png', url: cover12 }
]);
const selectImg = ref(imgList.value[0]);
const templateId = ref(null)
// 表单数据
const formLabelAlign = reactive({
  realName: '',
  classify: '',
  remarks: '',
  imageUrl: '',
  isKnowledge: false,
  templateId: null
});
// 表单校验
const rules = reactive<any>({
  realName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  classify: [{ required: true, message: '请选择分类', trigger: 'blur' }]
});

const addDia = ref(false);
const coverListRef = ref(null);
// 打开弹窗
const addClick = (data) => {
  templateId.value = data.value.id;
  addDia.value = true;
};
// 打开弹窗回调
const dialogOpen = () =>{
  coverListRef.value.openCoverList();
}
// 关闭弹窗
const addClose = () => {
  addDia.value = false;
  formRef.value.resetFields();
};
const isOpenKnowledge = ref<boolean>(false); //是否开启知识库
// 是否开启知识库接口
const onIsAilLibrary = async () => {
  let res: any = await apiKnowledgeConfigConfigKey('knowledge_base_state');
  if (res.code == 200) {
    isOpenKnowledge.value = res.data == 'dify' ? true : false;
  }
};
// 表单提交
const handleClose = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (formLabelAlign.isKnowledge && !isOpenKnowledge.value) {
        ElMessage.error('问答知识库信息未配置');
        return;
      }
      // formLabelAlign.imageUrl = selectImg.value.name;
      formLabelAlign.templateId = templateId.value;
      let res = await apiEnterpriseKnowledgeAdd(formLabelAlign);
      if (res.code === 200) {
        ElMessage.success('创建成功');
        addClose();
        emits('onRefresh');
      }
    }
  });
};
defineExpose({
  addClick
});
</script>
<style scoped lang='scss'>
.cover_box {
  display: flex;

  .cover_img {
    position: relative;
    margin-right: 20px;
    margin-top: 32px;

    img {
      width: 207px;
      height: 300px;
      border-radius: 8px;
    }

    .cover_img_text {
      position: absolute;
      top: 1px;
      padding: 25px;

      p {
        margin: 0;
        color: white;
        font-size: 23px;
        line-height: 30px;
      }

      span {
        color: white;
        font-size: 13px;
      }
    }
  }

  .cover_list {
    .cover_list_item {
      p {
        margin: 0;
        font-size: 12px;
      }

      img {
        width: 72px;
        height: 98px;
        border-radius: 8px;
      }

      .cover_list_img {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        .active {
          border: 3px solid rgb(20, 86, 240);
        }
      }
    }
  }
}

:deep(.el-dialog__header) {
  padding: 0 !important;
  padding-bottom: 10px !important;
}

.add_container_box {
  display: flex;
  gap: 15px;
}

.add_container {
  &:hover {
    background-color: rgba(31, 35, 41, 0.08);
  }

  width: 270px;
  height: 54px;
  border: 1px solid rgb(222, 224, 227);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 15px;

  .add_container_text {
    padding-left: 10px;

    p {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
    }

    span {
      font-size: 12px;
      color: rgb(100, 106, 115);
    }
  }

  .svg-icon {
    font-size: 24px;
  }
}

:deep(.el-dialog__footer) {
  padding: 0;

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>